
var app=new Vue({
	el:'#app',
	data:{
		goods:[],	
		menuScroll:Object,
		foodScroll:Object,
		scrollY:0,//记录内容部分当前高度
		listHeight:[],//记录内容部分每个模块的高度
	},
	created:function(){
		this.goods=goods;
		this.$nextTick(()=>{
			this._initScroll();
			this._calculateHeight();
		});
	},
	methods:{
		//初始化滚动
		_initScroll:function(){
			this.menuScroll=new BScroll(this.$refs.menu,{
				click:true
			});
			this.foodScroll=new BScroll(this.$refs.food,{
				click:true,
				//当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程
				//中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
				probeType:3,
			});
			this.foodScroll.on('scroll',(pos)=>{
				//每一次滑动记录当前高度
				this.scrollY=Math.abs(Math.round(pos.y))
			})
		},
		//将内容部分每个模块的高度存入数组
		_calculateHeight(){
			let foodList=this.$refs.food.getElementsByClassName('food-list-hook');
			let height=0;
			this.listHeight.push(height);
			Array.from(foodList).forEach((item)=>{
				height+=item.clientHeight;
				this.listHeight.push(height);
			})
		},
		selectMenu:function(index){
			//this.currentIndex=index;
			if(!event._constructed){
  				return;
  			}
			let foodList=this.$refs.food.getElementsByClassName('food-list-hook');
			//获取点中菜单相应的内容模块
			let el=foodList[index];
			//滚动的该元素
			this.foodScroll.scrollToElement(el,300)
		},
	},
	computed:{
		//当前选中菜单的index
		currentIndex(){
			for(let i=0;i<this.listHeight.length;i++){
				let height1=this.listHeight[i];
				let height2=this.listHeight[i+1];
				if(!height2||this.scrollY>=height1&&this.scrollY<height2){
					return i;
				}
			}
			return 0;
		}
	}
})
